<template>
  <view class="flex-col page">
    <view class="flex-col">
      <MyHeader title="消息"></MyHeader>
      <!-- 有消息 -->
      <view v-if="true" class="flex-col list">
      <!-- 无消息 -->  
        <view class="flex-row justify-between self-stretch list-item" v-for="(item, index) in items" :key="index">
          <view class="flex-row items-end self-center">
            <view class="flex-col justify-start items-start relative group_2">
              <image
                class="image_6"
                src="https://ide.code.fun/api/image?token=676816fbdefdb10011103b99&name=69de1130b89d3c28397359187e59e8db.png"
              />
              <view class="flex-col justify-start items-center text-wrapper pos"><text class="font">4</text></view>
            </view>
            <view class="ml-10 flex-col items-start group_3">
              <text class="font_2">老街冒菜</text>
              <text class="mt-8 font_3 text_2">外卖到哪里了？</text>
            </view>
          </view>
          <text class="self-start font_3 text">13:19</text>
        </view>
      </view>
      <view style="width: 100vw;" v-else class="flex-col items-center notGroup">
        <image
          class="image_6"
          src="https://ide.code.fun/api/image?token=676816fbdefdb10011103b99&name=a0a4eac2b099a694a94bf8088cf0c8cc.png"
        />
        <text class="text mt-11">没有消息</text>
      </view>
      
    </view>
    </view>
</template>

<script setup>
import {onLoad} from '@dcloudio/uni-app'
import { ref } from 'vue';
// 定义当前类型  0 :校园墙
const type = ref('')
const items = [null,null,null,null]
onLoad((options)=>{
  type.value = options.type
})
</script>

<style scoped lang="css">
  .notGroup {
    margin-top: 378rpx;
    padding-bottom: 20px;
    box-sizing: content-box;
  
  }
  .ml-5 {
    margin-left: 10rpx;
  }
  .ml-11 {
    margin-left: 22rpx;
  }
  .mt-355 {
    margin-top: 710rpx;
  }
  .ml-101 {
    margin-left: 202rpx;
  }
  .page {
    background-color: #f7f8fa;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
  }
  .section {
    padding: 0 12rpx 42rpx;
    background-image: linear-gradient(180deg, #4c8eef 0%, #84bbd900 100%);
  }
  .group {
    padding: 36rpx 16rpx 40rpx;
  }
  .image {
    width: 34rpx;
    height: 22rpx;
  }
  .image_2 {
    width: 30rpx;
    height: 22rpx;
  }
  .image_3 {
    width: 48rpx;
    height: 22.66rpx;
  }
  .section_2 {
    padding: 12rpx 24rpx;
    background-color: #ffffff99;
    border-radius: 50rpx;
    width: 174rpx;
    border-left: solid 1rpx #97979733;
    border-right: solid 1rpx #97979733;
    border-top: solid 1rpx #97979733;
    border-bottom: solid 1rpx #97979733;
  }
  .image-wrapper {
    width: 38rpx;
  }
  .image_5 {
    width: 38rpx;
    height: 14rpx;
  }
  .section_3 {
    background-color: #33333333;
    width: 1rpx;
    height: 37rpx;
  }
  .image_4 {
    width: 34rpx;
    height: 34rpx;
  }
  .list {
    padding-top: 8rpx;
  }
  .list-item {
    padding: 16rpx 30rpx 20rpx;
  }
  .group_2 {
    padding-top: 12rpx;
    width: 96rpx;
  }
  .image_6 {
    border-radius: 12rpx;
    width: 84rpx;
    height: 84rpx;
  }
  .text-wrapper {
    padding: 8rpx 0;
    background-color: #f52f00;
    border-radius: 50%;
    width: 28rpx;
  }
  .pos {
    position: absolute;
    right: 0;
    top: 0;
  }
  .font {
    font-size: 20rpx;
    font-family: SourceHanSansCN;
    line-height: 14.66rpx;
    color: #ffffff;
  }
  .group_3 {
    margin-bottom: 4rpx;
  }
  .font_2 {
    font-size: 32rpx;
    font-family: SourceHanSansCN;
    line-height: 29.48rpx;
    color: #333333;
  }
  .font_3 {
    font-size: 24rpx;
    font-family: SourceHanSansCN;
    line-height: 22.84rpx;
    color: #999999;
  }
  .text_2 {
    line-height: 22.16rpx;
  }
  .text {
    margin-top: 48rpx;
    line-height: 18.22rpx;
  }
  .section_4 {
    padding: 6rpx 0;
    filter: drop-shadow(0rpx -4rpx 8rpx #a1727214);
    background-color: #ffffff;
  }
  .equal-division-item {
    width: 48rpx;
    height: 48rpx;
  }
  .pos_2 {
    position: absolute;
    right: 336rpx;
    top: 0;
  }
</style>